<template>
  <el-table :data="data" border>
    <el-table-column type="expand" align="center" label="#" width="50">
      <template slot-scope="slot">
        <permission-table :roleId="slot.row.id"></permission-table>
      </template>
    </el-table-column>
    
    <el-table-column prop="roleName" show-overflow-tooltip label="角色名" />
    <el-table-column prop="roleDesc" show-overflow-tooltip label="角色描述" />
  </el-table>
</template>

<script>
// 网络
import { getUserRoles } from '@/network/homeRequest.js'

// 组件
import PermissionTable from '@/views/Main/User/PermissionTable.vue';

export default {
  data() {
    return {
      data: []
    }
  },
  props: {
    id: String
  },
  methods: {
    async getRoles(id) {
      const { data, meta } = await getUserRoles(id)
      // console.log(data, meta)

      if (meta.status != 200) {
        return this.$message(meta.msg)
      }

      this.data = data.roles
    }
  },
  created() {
    this.getRoles(this.id)
  },
  components: {
    PermissionTable
  }
}
</script>
